<!-- 增加保证金 -->
<template>

  <div class="pag" >
    <div class="bond-banner">
      <h4>我的租用令牌保证金</h4>
      <p>5643CVNT</p>
    </div>
    <div class="bond-main">
      <div class="bond-tip">您尚有<i>4</i>块令牌在租借中需要预留<i>3456CVNT</i>保证金以确保租借协议正常运行</div>
      <div class="bond-input">
        <input type="number" v-model="inputNum" placeholder="输入提取保证金的数量">
        <label>CVNT</label>
      </div>
      <div class="wallet-tip">保证金可提取<span>6234000CVNT</span></div>
      <div class="cn-btn">确定</div>
      <div class="bond-tip2">保证金在租借完成之后可以随意提取</div>
    </div>
    <div class="bond-list">
      <div class="bond-list-head">保证金明细</div>
      <div class="bond-list-body">
        <div class="bond-item" v-for="item in 20">
          <span>2019-10-22 12:33:44</span>
          <label :class="{red: true,green:false}">+6334CVNT</label>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

  export default {
    data() {
      return {
        inputNum: null,
          list: []
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {

      })
    },
    methods: {
      toastTip (info) {
        this.$warn(info)
      },
    }
  }
</script>

<style lang="scss" scoped>

  .pag {
    background: #F5F5FB;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    font-size: 26px;
    color: #71768C;
  }

  .bond-banner {
    width:690px;
    min-height: 216px;
    height:216px;
    background: url("~assets/images/token/logo2.png") 30px center/134px 162px no-repeat ,linear-gradient(180deg,rgba(54,77,186,1) 0%,rgba(73,111,201,1) 100%);
    border-radius:10px 10px 0px 0px;
    margin: 30px auto 0 auto;
    font-size:32px;
    font-weight:600;
    color:rgba(255,255,255,1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 192px;
    h4 {
      margin-bottom: 40px;
    }
  }

  .bond-main {
    background: #fff;
    padding: 30px 0 20px 0;
  }

  .bond-tip {
    width: 623px;
    font-size:26px;
    color:#71768C;
    text-align: center;
    margin: 0 auto 29px auto;
    line-height: 39px;
    i {
      color: #FD5454;
      font-style: normal;
      padding: 0 5px;
    }
  }

  .bond-tip2 {
    text-align: center;
    margin-top: 19px;
  }

  .bond-input {
    width:690px;
    min-height: 84px;
    height:84px;
    background:rgba(246,247,248,1);
    border:2px solid rgba(227,227,227,1);
    border-radius:8px;
    margin: 0 auto;
    position: relative;
    input {
      background: transparent;
      border: 0;
      height: 100%;
      width: 100%;
      display: block;
      font-size:30px;
      color:rgba(20,59,145,1);
      text-align: center;
    }
    label {
      font-size:30px;
      font-weight:600;
      color:rgba(32,44,91,1);
      position: absolute;
      right: 23px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .wallet-tip {
    font-size:26px;
    font-weight:600;
    color:rgba(113,118,140,1);
    display: flex;
    align-items: center;
    margin: 30px 0;
    padding-left: 30px;
    span {
      font-size:26px;
      font-weight:600;
      color:rgba(32,44,91,1);
      margin-left: 22px;
    }
  }

  .cn-btn {
    width:690px;
    min-height: 84px;
    height:84px;
    background:rgba(23,62,143,1);
    border-radius:8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:34px;
    color:rgba(255,255,255,1);
    margin: 0 auto;
  }

  .bond-list {
    flex: 1;
    padding: 0 29px 52px 29px;
    width:690px;
    background:rgba(255,255,255,1);
    border-radius:14px;
    margin: 30px auto 0 auto;
  }

  .bond-list-head {
    position: sticky;
    position: -webkit-sticky;
    top: -1px;
    height: 85px;
    font-size:34px;
    color:rgba(32,44,91,1);
    border-bottom: 2px solid #F4F4F4;
    display: flex;
    align-items: center;
    background: #fff;
    &:before {
      content: '';
      width:6px;
      height:36px;
      background:rgba(43,117,243,1);
      margin-right: 14px;
    }
  }

  .bond-item {
    margin-top: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:26px;
    color:rgba(113,118,140,1);
    label {
      &.red {
        color: #DC0630;
      }
      &.green {
        color: #00A989;
      }
    }
  }



</style>













